<template>
    <div class="switcher-wrapper">
        <div class="ui label icon switcher" @click.stop.prevent="show=!show">
            <span>{{showText}}</span>
            <i
            class="icon big"
            :class="{'toggle off':!show,'toggle on':show}"></i></div>
        <!--<div class="ui checkbox slider " @click="val=val==1?0:1">-->
            <!--<input type="checkbox" :name="name" v-model="val">-->
            <!--<label for="" v-text="show_text[val]"></label>-->
        <!--</div>-->
    </div>
</template>
<script type="text/ecmascript-6">
    export default{
        data(){
            return {
                show: false
            }
        },
        watch: {
            show: function (val, old) {
                if (val != old) {
                    this.$emit('to_switch', val);
                }
            }
        },
        computed: {
            showText(){
                return this.show_text[this.show ? 1 : 0];
            }
        },
        props: ['show_text', 'fval','name'],
        created(){
            this.show = Boolean(this.fval);
        }
    }
</script>

<style rel="stylesheet/less" lang="less" scoped>
    @import "../../common/style/mixin";
    .switcher-wrapper {
        line-height: 3.5em;
        .ui.label.icon.switcher {
            span{
                vertical-align: middle;
                display: inline-block;
                margin-right:6px;
            }
            .icon {
                margin-right:0;
                .icon_hover();

            }
        }
    }
</style>
